<template>
    <div class="g-bd">
        <div class="g-wrap f-pr">
            <div class="u-title clear-block">
                <h3>
                    <span class="f-ff2">全部</span>
                    <a href="javascript:;" class="u-btn2 u-btn2-1 menu" @click="toggleCateListBox">
                        <i>
                            选择分类
                            <em class="u-icn u-icn-down-arrow"></em>
                        </i>
                    </a>
                </h3>
                <div class="u-btn f-fr u-btn-hot">
                        <router-link to="/discover/playlist/?order=hot" class="a1">热门</router-link>
                </div>
            </div>
            <CateListBox :isShowCateListBox="isShowCateListBox"></CateListBox>
            <ul class="m-cvrlst clear-block">
                <Cover v-for="(item,index) in playListData" key="index" v-bind="{...item}" ></Cover>
            </ul>
        </div>
    </div>
</template>
<script setup>
        import CateListBox from './components/CateListBox.vue';
        import Cover from '../components/Cover.vue';
        import playListData from '@/json_data/play_list_data.json'
        import {ref} from 'vue'
        const isShowCateListBox = ref(false);

        const toggleCateListBox = () =>{
            isShowCateListBox.value = !isShowCateListBox.value;
        }
</script>

<style lang="scss">
    .g-bd{
        .g-wrap{
            padding: 40px;
            .u-title{
                height: 40px;
                border-bottom: 2px solid #c20c0c;
                h3{
                    float: left;
                    font-size: 24px;
                    font-weight: normal;
      
              
                }

                .u-btn{
                    .a1{
                        float: left;
                        width: 46px;
                        height: 29px;
                        line-height: 29px;
                        text-align: center;
                        color: #fff;
                    }
                }

                .menu{
                    font-size: 12px;
                    font-weight: normal;
                    margin: 2px 0 0 12px;
                    i{
                        color: #0c73c2 !important;
                        padding: 0 10px 0 15px;
                    }

                    .u-icn-down-arrow{
                        margin-left: 5px;
                    }
                }
            }
            .m-cvrlst{
                margin: 30px 0 0 -50px;
            }
        }
    }
</style>